<div>
  <d-checkbox [label]="'Checked'" [isShowTitle]="false" (change)="onCheckbox1Change($event)" [ngModel]="true"> </d-checkbox>
  <d-checkbox [label]="'Not checked'" [isShowTitle]="false" (change)="onCheckbox1Change($event)" [ngModel]="false"> </d-checkbox>
  <d-checkbox [label]="'Custom title'" [isShowTitle]="true" [title]="'my title'" (change)="onCheckbox1Change($event)" [ngModel]="false">
  </d-checkbox>
  <d-checkbox [label]="'No Animation'" [isShowTitle]="false" [showAnimation]="false" (change)="onCheckbox1Change($event)" [ngModel]="true">
  </d-checkbox>
  <d-checkbox [name]="'checkbox-username'" [label]="'Disabled'" [disabled]="true" [ngModel]="true" (change)="onCheckbox2Change($event)">
  </d-checkbox>
  <d-checkbox [name]="'checkbox-username'" [label]="'Disabled'" [disabled]="true" [ngModel]="false" (change)="onCheckbox2Change($event)">
  </d-checkbox>
  <d-checkbox
    [label]="'Half-checked'"
    [isShowTitle]="false"
    (change)="onHalfCheckboxChange($event)"
    [halfchecked]="halfCheck"
    [(ngModel)]="allCheck"
  >
  </d-checkbox>
  <d-checkbox
    [label]="'Half-checked disabled'"
    [isShowTitle]="false"
    [disabled]="true"
    (change)="onCheckbox1Change($event)"
    [halfchecked]="true"
  >
  </d-checkbox>
  <d-checkbox [name]="'checkbox-username'" [label]="'NgModel'" [(ngModel)]="checked" (change)="onCheckbox2Change($event)">
  </d-checkbox>
  <d-checkbox
    [name]="'checkbox-username'"
    [label]="'Custom color'"
    [color]="'RGB(255, 193, 7)'"
    [ngModel]="false"
    (change)="onCheckbox2Change($event)"
  >
  </d-checkbox>
  <d-checkbox
    [name]="'checkbox-custom-color'"
    [halfchecked]="halfCheck2"
    [label]="'Custom color'"
    [color]="'RGB(255, 193, 7)'"
    [(ngModel)]="allCheck2"
    (change)="onHalfCheckboxChange2($event)"
  >
  </d-checkbox>
  <d-checkbox [name]="'checkbox-username'" [ngModel]="true" (change)="onCheckbox2Change($event)" [labelTemplate]="myLabel"> </d-checkbox>
  <ng-template #myLabel let-disabled="disabled">
    <div class="inline-block">
      <d-select
        [(ngModel)]="number"
        [options]="[1, 2, 3, 4]"
        [disabled]="disabled"
        size="sm"
        class="inline-block"
        (click)="$event.preventDefault(); $event.stopPropagation()"
      ></d-select>
      Custom label template
    </div>
  </ng-template>
</div>
